<template>
  <Page ref="page" :show-nav-bar="false" v-slot:default="{contentClass, listerData, more}" :lister="lister">
    <div :class="contentClass">

      <LoadingBox v-if="pageLoading" class="w-40 h-40 absolute mt-8" style="z-index: 1; left: calc((100% - 10rem)/2)">
        <span>加载中...</span>
      </LoadingBox>

      <template v-else>
        <div class="px-4">

          <van-list
              v-model:loading="loading"
              :finished="!more"
              finished-text="没有更多了"
              @load="onLoad">

            <div class="flex">
              <div class="text-sm font-bold bg-gray-100 p-2 rounded-sm" style="width: 100%">用户名称</div>
            </div>

            <div class="flex" v-for="share in listerData">
              <div class="flex items-center p-2" style="width: 100%">
                <van-image :src="share.user.avatar" :width="'3.3rem'" :height="'3.3rem'" :show-error="true" :error-icon="'user-o'" round width="15%"></van-image>
                <span style="width: 85%" class="ml-2 text-xs truncate">{{share.user.nickname ?? '匿名用户'}}</span>
              </div>
            </div>

          </van-list>

        </div>
      </template>

    </div>
  </Page>
</template>

<script setup>
import {provide, ref} from 'vue';
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import Page from "../components/Page.vue"
import {computed, onMounted, watch} from "vue";

import apis from '../apis'
import dayjs from "dayjs";
import LoadingBox from "../components/LoadingBox.vue";

const store = useStore()
const router = useRouter()
const route = useRoute()

const user = computed(() => store.state.user)
const activity = ref(null)
const shares = ref(null)
const lister = ref({
  enabled: true,
  pageable: true,
  modelName: 'activity.record',
  query: {
    activity_id: route.query.activity_id,
  }
})

const pageLoading = ref(true)

const page = ref(null)
const loading = computed(() => page.value ? page.value.loading : true)

const onLoad = () => {
  page.value.onMore()
}

onMounted(async () => {
  await apis.activity.show({
    params: {
      id: route.query.activity_id,
    }
  }).then(({data: result}) => {
    activity.value = result.data
  })

  pageLoading.value = false
})
</script>

<style scoped>

</style>